<template>
  <q-page class="q-pa-md grid_container fit scroll">
    <q-card class="salt-fis-card">
      <q-card-section class="q-mb-none q-pb-none"
        ><h1 class="text-h6 text-weight-bold salt-fish q-pa-none q-ma-none">
          Salt Fish CMS
        </h1></q-card-section
      >
      <q-card-section><p class="text-h6">遨游海洋，直至干尽</p></q-card-section>
    </q-card>
    <q-card class="top_space"></q-card>
    <q-card class="visits_card" v-element-size="onResize">
      <q-card-section class="q-pb-none"
        ><div class="row">
          <h1 class="text-h6 text-weight-bold salt-fish q-pa-none q-ma-none col">访问量</h1>
          <div class="col">
            <q-input readonly :model-value="`${dateRange.from}~${dateRange.to}`">
              <q-menu>
                <q-date mask="YYYY-MM-DD" @range-end="getVisits" v-model="dateRange" range>
                  <div class="row items-center justify-end">
                    <q-btn v-close-popup label="关闭" color="primary" flat />
                  </div> </q-date
              ></q-menu>
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <!-- <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                  </q-popup-proxy> -->
                </q-icon>
              </template></q-input
            >
          </div>
        </div>
      </q-card-section>
      <q-card-section>
        <div id="visitsChart" ref="visitsChartRef"></div>
      </q-card-section>
    </q-card>
    <q-card class="users_card"></q-card>
  </q-page>
</template>
<script>
import { ref, watch, computed, onMounted, defineComponent } from 'vue';
import { date } from 'quasar';
import { api } from 'boot/axios';
import { vElementSize } from '@vueuse/components';
import * as Charts from 'echarts';
export const apiFns = {
  visitsApi: (params) =>
    api.get(`/api/system/loginLogs/getOnlineUsersChart`, {
      params,
    }),
};
export default defineComponent({
  name: 'IndexPage',
  directives: {
    'element-size': vElementSize,
  },
  setup() {
    const visitsParams = ref({
      page: 1,
      pageSize: 999,
    });
    const visits = ref([]);
    const dateRange = ref(
      (() => {
        let now = new Date();
        return {
          from: date.formatDate(new Date(now.getTime() - 6 * 24 * 60 * 60 * 1000), 'YYYY-MM-DD'),
          to: date.formatDate(now, 'YYYY-MM-DD'),
        };
      })(),
    );
    const chartConfig = computed(() => {
      return {
        title: false,
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '2%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: visits.value.map((item) => date.formatDate(new Date(item.date), 'MM-DD')),
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#0d6fd1',
            },
          },
        },
        series: [
          {
            // name: '访问量',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new Charts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#0d6fd1',
                },
                {
                  offset: 1,
                  color: '#0d6fd133',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: visits.value.map((item) => item.num),
          },
        ],
      };
    });
    const visitsChartRef = ref(null);
    let visitsChart = null;
    const initVisitsChart = () => {
      visitsChart = Charts.init(visitsChartRef.value);
      visitsChart.setOption(chartConfig.value);
    };
    watch(
      () => chartConfig.value,
      () => {
        if (visitsChart) {
          visitsChart.setOption(chartConfig.value);
        }
      },
    );

    function onResize() {
      visitsChart.resize();
    }
    const getVisits = async () => {
      // console.log(dateRange.value);
      if (!dateRange.value) return;
      const { data } = await apiFns.visitsApi({
        ...visitsParams.value,
        beginTime: dateRange.value.from,
        endTime: dateRange.value.to,
      });
      visits.value = data;
    };
    getVisits();
    onMounted(() => {
      initVisitsChart();
    });
    return {
      dateRange,
      visits,
      visitsParams,
      getVisits,
      visitsChartRef,
      onResize,
    };
  },
});
</script>
<style scoped lang="scss">
/**
$breakpoint-xs: 599px !default
$breakpoint-sm: 1023px !default
$breakpoint-md: 1439px !default
$breakpoint-lg: 1919px !default
*/
.grid_container {
  display: grid;
  row-gap: 20px;
  column-gap: 20px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 150px 350px;
}
.salt-fis-card {
  grid-column: 1 / 3;
}
.top_space {
  grid-column: 3 / 13;
}
.top-card {
  height: 150px;
}
.visits_card {
  grid-column: 1 / 8;
  height: 350px;
}
.users_card {
  grid-column: 8 / 13;
  height: 350px;
}
#visitsChart {
  height: 250px;
  width: 100%;
}
@media (max-width: $breakpoint-xs) {
  .salt-fis-card {
    grid-column: 1 / 13;
  }
  .top_space {
    grid-column: 1 / 13;
  }
  .visits_card {
    grid-column: 1 / 13;
  }
  .users_card {
    grid-column: 1 / 13;
  }
}
@media (min-width: $breakpoint-xs) and (max-width: $breakpoint-sm) {
  .salt-fis-card {
    grid-column: 1 / 5;
  }
  .top_space {
    grid-column: 5 / 13;
  }
  .visits_card {
    grid-column: 1 / 13;
  }
  .users_card {
    grid-column: 1 / 13;
  }
}
@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md) {
  .salt-fis-card {
    grid-column: 1 / 4;
  }
  .top_space {
    grid-column: 4 / 13;
  }
  .visits_card {
    grid-column: 1 / 8;
  }
  .users_card {
    grid-column: 8 / 13;
  }
}

@media (min-width: $breakpoint-lg) {
  .salt-fis-card {
    grid-column: 1 / 3;
  }
  .top_space {
    grid-column: 3 / 13;
  }
  .visits_card {
    grid-column: 1 / 8;
  }
  .users_card {
    grid-column: 8 / 13;
  }
}
.salt-fish {
  color: $primary;
}
</style>
